<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      background-color: #c9e2b3;
    }
  </style>
</head>
<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

<div>
  <button>点我</button>
</div>

<button>阻止默认的</button>
<script>
/*// 使用e.target动态改变样式
  var allli = document.getElementsByTagName("li");
  for(var i=0;i<allli.length;i++){
    allli[i].addEventListener("click",function (event) {
      event.target.style.backgroundColor="pink";
    })
  }*/

// 使用e.target动态改变样式,让背景色随机生成
var allli = document.getElementsByTagName("li");
for(var i=0;i<allli.length;i++){
  allli[i].addEventListener("click",function (event) {
    var arr=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
    var allcolor="";
    for(var j=0;j<6;j++){
      var num = parseInt(Math.random()*16);
      allcolor+=arr[num];
      console.log(num);
    }
    console.log(allcolor);
    event.target.style.backgroundColor="#"+allcolor;
  },false)
}

// 3.阻止事件向外传播：event.stopPropagation()必须是冒泡事件
document.getElementsByTagName("button")[0].addEventListener("click",function (event) {
  console.log("点我div的也会被触发");
  console.log("点我div的也会被触发,用event.stopPropagation阻止冒泡");
  event.stopPropagation();
},false);
document.getElementsByTagName("div")[0].addEventListener("click",function (event) {
  console.log("冒泡事件,所以点btn我也会被触发");
},false);

//4.阻止默认行为e.preventDefault
//右键单击事件oncontextmenu，e.preventDefault阻止默认的点击右键会触发的事件
  document.getElementsByTagName("button")[1].addEventListener("contextmenu",function (event) {
    console.log("右键单击事件被阻止了");
    event.preventDefault();
  })
</script>
</body>
</html>
